<template>
  <div class="comDetail">
    <!-- 公司展示页 -->
    <div
      class="banner"
      :style="{
        backgroundImage: `url(http://129.211.80.240:1337${detail.logo})`,
        backgroundSize: 'cover'
      }"
    >
      <div class="mask"></div>
    </div>
    <div class="comIntro">
      <div @click="$router.back()" class="leftIcon">
        <van-icon name="arrow-left" />
      </div>
      <div class="comName">
        {{ detail.name }}
        <div class="logo">
          <img :src="'http://129.211.80.240:1337' + detail.logo" alt="" />
        </div>
      </div>
      <div class="comTags">
        <span>{{ detail.type }}</span>
        <span>{{ detail.step }}</span>
        <span>{{ detail.scale }}</span>
      </div>
      <div class="worktime">
        <span>{{ detail.workTime }}</span>
        <span>{{ detail.resetDay }}</span>
        <span>{{ detail.overtime }}</span>
      </div>
      <div class="more">
        <van-tabs line-width="0" background="transparent" swipeable ellipsis>
          <van-tab v-for="(item, index) in detail.weals" :key="index">
            <template #title>
              <span>
                <i class="iconfont" :class="[item.icon]"></i>
                {{ item.text }}</span
              >
              <!-- <span><i class="iconfont iconicon_gongsi_time"></i></span> -->
            </template>
          </van-tab>
          <van-tab><span></span></van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 公司地址 -->
    <div class="address">
      <van-cell title="公司地址" is-link value="全部地址" @click="address" />
      <div class="nav">
        <div class="navleft">
          <div>
            <span>{{ detail.region }}</span>
            <span>{{ detail.name }}</span>
          </div>
          <div class="walkTime">
            距离当前<span>50</span>m，步行需要<span>57秒</span>
          </div>
        </div>
        <div class="navright">
          <van-button plain type="default" round
            ><van-icon name="share-o" />导航</van-button
          >
        </div>
      </div>
    </div>
    <!-- 公司简介 -->
    <div class="comText">
      <van-cell title="公司简介" />
      <div class="comContent" :class="{ hidden: isShow }">
        <div>
          <p>
            {{ detail.desc }}
          </p>
        </div>
      </div>
      <div class="textMask" v-if="isShow" @click="showMore">
        展示更多<van-icon name="arrow-down" />
      </div>
    </div>
    <!-- 公司照片 -->
    <div class="comPicture">
      <h4>公司照片</h4>
      <ul>
        <li v-for="(subitem, index) in detail.sliders" :key="index">
          <img :src="`http://129.211.80.240:1337${subitem}`" alt="" />
        </li>
      </ul>
    </div>
    <!-- 工商信息 -->
    <div class="business">
      <h4>工商信息</h4>
      <div class="busItem">
        <b>公司名称</b><span>{{ detail.fullname }}</span>
      </div>
      <div class="busItem">
        <b>成立时间</b><span>{{ detail.establishedTime }}</span>
      </div>
      <div class="busItem">
        <b>注册资本</b><span>{{ detail.capital }}</span>
      </div>
      <div class="busItem">
        <b>法人代表</b><span>{{ detail.legalPerson }}</span>
      </div>
      <div class="busItem">
        <b>法人代表</b><span>{{ detail.messageSource }}</span>
      </div>
    </div>
    <!-- 评分 -->
    <div class="mark">
      <div>
        <van-cell>
          <template #title>
            <div class="fleft">面试评价</div>
            <div class="fright" @click="writeContent">写评论</div>
          </template>
        </van-cell>
      </div>
      <div class="scoreBox">
        <div class="line"></div>
        <div class="total">
          <div>
            <span style="font-size:40px; color:skyblue">{{
              detail.interviewScore
            }}</span
            >分
          </div>
          <div class="star">
            <van-rate
              v-model="score1"
              :size="14"
              allow-half
              color="#ffd21e"
              void-color="#eee"
            />
          </div>
        </div>
        <div class="scoreDetail">
          <ul>
            <li>
              <span>岗位描述</span>
              <van-rate
                v-model="score1"
                :size="14"
                color="#ffd21e"
                void-color="#eee"
              />
            </li>
            <li>
              <span>面试情况</span>
              <van-rate
                v-model="score2"
                :size="14"
                allow-half
                color="#ffd21e"
                void-color="#eee"
              />
            </li>
            <li>
              <span>面试官</span>
              <van-rate
                v-model="score3"
                :size="14"
                allow-half
                color="#ffd21e"
                void-color="#eee"
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 公司评论(导入组件) -->
    <comment v-for="(item, index) in 15" :key="index" />
    <!-- 在招职位&面试题 -->
    <div class="comBottom">
      <div @click="$router.push(`/companyPosition/${id}`)">
        在招职位 <span>11</span>
      </div>
      <div @click="$router.push('/subject/全国/355')">
        企业面试题 <span class="test">22</span>
      </div>
    </div>
  </div>
</template>

<script>
import { companyDetail } from '../../api/api'
export default {
  data () {
    return {
      isShow: true,
      // detail
      detail: {},
      id: this.$route.params.id,
      score1: 5,
      score2: 5,
      score3: 5
    }
  },
  methods: {
    address () {
      this.$toast('只有一个地址')
    },
    // 展示更多内容
    showMore () {
      this.isShow = false
    },
    // 写评论
    writeContent () {
      this.$toast('请期待更多功能')
    },
    // 获取详情
    async getDetails () {
      const id = this.$route.params.id
      const res = await companyDetail(id)
      console.log(res)
      this.detail = res.data
      this.score1 = res.data.interviewScore
      this.score2 = res.data.interviewerScore
      this.score3 = res.data.positionScore
    }
  },
  created () {
    this.getDetails()
  },
  components: {
    comment: () => import('./commentItem')
  }
}
</script>

<style lang="less" scoped>
.comDetail {
  font-size: 14px;
  margin-top: 250px;
  margin-bottom: 100px;
  overflow: hidden;
  .banner {
    width: 100%;
    height: 255px;
    position: fixed;
    top: 0;
    z-index: 30;
    background-image: url('');
    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 30;
    }
  }
  .banner:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    filter: blur(10px); /*为了模糊更明显，调高模糊度*/
    z-index: 2;
  }
  .comIntro {
    position: fixed;
    top: 0;
    height: 255px;
    width: 100%;
    z-index: 30;
    color: #ffffff;
    padding: 10px;
    .leftIcon {
      margin-top: 10px;
      font-size: 35px;
    }
    .comName {
      position: relative;
      font-size: 15px;
      margin-top: 30px;
      .logo {
        width: 58px;
        height: 58px;
        background-color: #ccc;
        position: absolute;
        top: 0;
        right: 30px;
        img {
          width: 100%;
        }
      }
    }
    .comTags {
      margin-top: 20px;
      color: #b4b4bd;
      span {
        margin-right: 5px;
        padding: 2px 5px;
        border-radius: 4px;
        border: 1px solid #b4b4bd;
      }
    }
    .worktime {
      margin-top: 25px;
    }
    .more {
      margin-top: 20px;
      color: #b4b4bd;
      /deep/ .van-tabs__wrap--scrollable .van-tab {
        padding-right: 4px;
      }
      span {
        display: inline-block;
        margin-top: 2px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        border: 1px solid #b4b4bd;
        border-radius: 5px;
        color: #b4b4bd;
        overflow: hidden;
        i {
          font-size: 18px;
        }
      }
    }
  }
  // 公司位置
  .address {
    .nav {
      padding: 0 8px;
      display: flex;
      .navright {
        /deep/ .van-button {
          height: 30px;
          margin-top: 8px;
        }
      }
      .navleft {
        .walkTime {
          color: #b4b4bd;
        }
      }
    }
  }
  .comText {
    // padding: 0 8px;
    .comContent {
      // height: 100px;
      line-height: 24px;
      padding: 0 12px;
    }
    .hidden {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
    }
    .textMask {
      margin-top: 10px;
      height: 20px;
      text-align: center;
      line-height: 20px;
    }
  }
  // 照片pian
  .comPicture {
    ul {
      white-space: nowrap;
      overflow-x: auto;
      // width: 1000px;
      font-size: 0;
      li {
        display: inline-block;
        width: 100px;
        height: 70px;
        margin-right: 10px;
        img {
          border-radius: 10px;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  // 工商信息
  .business {
    .busItem {
      padding: 5px 10px;
      // margin-top: 10px ;
      b {
        margin-right: 30px;
        font-weight: 400;
        color: #b4b4bd;
      }
    }
  }
  // 评分
  .mark {
    width: 100%;
    height: 170px;
    padding: 10px;
    margin-top: 10px;
    .fleft {
      float: left;
      font-size: 16px;
    }
    .fright {
      float: right;
      font-size: 16px;
    }
    .scoreBox {
      position: relative;
      display: flex;
      padding: 20px;
      width: 100%;
      height: 100px;
      background-color: rgb(247, 247, 247);
      border-radius: 15px;
      .line {
        position: absolute;
        top: 10px;
        left: 130px;
        width: 1px;
        height: 80px;
        background-color: #cccccc;
      }
      .total {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .scoreDetail {
        flex: 2;
        ul {
          li {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            span {
              margin-left: 30px;
            }
          }
        }
      }
    }
  }
  // 评论
  // 职位面试题
  .comBottom {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    display: flex;
    z-index: 10;
    justify-content: space-around;
    text-align: center;
    background-color: #fff;
    div {
      position: relative;
      top: 10px;
      width: 40%;
      height: 40px;
      line-height: 40px;
      border: 1px solid #666666;
      border-radius: 10px;
      span {
        position: absolute;
        top: -10px;
        right: 30px;
      }
      .test {
        right: 20px;
      }
    }
  }
}
</style>
